<template>
  <div id="order" class="container">
    <h3 class="title">
      <span />
      关键词管理
    </h3>
    <el-tabs
      id="tabcard"
      v-model="activeName"
      class="tabs"
      type="card"
      @tab-click="handleClick"
    >
      <el-tab-pane label="关键词监控" name="2">
        <div class="searchBtn">
          <el-radio-group v-model="engine" size="medium" @change="changeEngine">
            <el-radio-button label="baidu_pc">百度PC</el-radio-button>
            <el-radio-button label="baidu_mob">百度移动</el-radio-button>
            <el-radio-button label="three_pc">360PC</el-radio-button>
            <el-radio-button label="sougou_mob">搜狗移动</el-radio-button>
          </el-radio-group>
        </div>
        <el-row :gutter="20" class="monitor">
          <el-col :span="6">
            <div class="box">
              <div class="icon el-icon-data-analysis" />
              <div class="text">
                <p>
                  <b>
                    排名第一页：{{ queryData.first ? queryData.first : 0 }}个
                  </b>
                </p>
                <p>统计日期：{{ queryData.time }}</p>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="box second">
              <div class="icon el-icon-data-line" />
              <div class="text">
                <p>
                  <b>排名前十页：{{ queryData.ten ? queryData.ten : 0 }}个</b>
                </p>
                <p>统计日期：{{ queryData.time }}</p>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="box third">
              <div class="icon el-icon-pie-chart" />
              <div class="text">
                <p>
                  <b>
                    达标关键词个数：{{ queryData.done ? queryData.done : 0 }}个
                  </b>
                </p>
                <p>统计日期：{{ queryData.time }}</p>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="box fourth">
              <div class="icon el-icon-data-board" />
              <div class="text">
                <p>
                  <b>关键词总数：{{ queryData.all ? queryData.all : 0 }}个</b>
                </p>
                <p>统计日期：{{ queryData.time }}</p>
              </div>
            </div>
          </el-col>
        </el-row>
        <div class="topbar">
          <div class="bar-left">
            <span>关键词过滤：</span>
            <el-radio-group v-model="rank" size="small" @change="changeRank">
              <el-radio-button label="1">第一名</el-radio-button>
              <el-radio-button label="3">前三名</el-radio-button>
              <el-radio-button label="10">第一页</el-radio-button>
              <el-radio-button label="30">前三页</el-radio-button>
              <el-radio-button label="50">前五页</el-radio-button>
              <el-radio-button label="100">前十页</el-radio-button>
            </el-radio-group>
            <span class="btn restBtn" @click="rest">重置</span>
          </div>
          <div class="bar-right">
            <el-input v-model="keywords" placeholder="请输入关键词" />
            <el-button
              type="primary"
              style="border-color: #fc561c"
              @click="search"
            >
              查询
            </el-button>
          </div>
        </div>
        <div class="content">
          <el-table
            border
            stripe
            :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }"
            :data="resultData"
          >
            <el-table-column label="关键词名称" prop="keyword" />
            <el-table-column label="最高排名" prop="top_rank" />
            <!-- <el-table-column label="采集区域" prop="area" /> -->
            <!-- <el-table-column label="采集IP" prop="ip" /> -->
            <!-- <el-table-column label="采集网络" prop="network" /> -->
            <el-table-column label="关键词收录量" prop="collect_count" />
            <el-table-column label="页面标题" prop="page_title" />
            <el-table-column label="页面链接地址" prop="page_url" />
            <!-- <el-table-column label="搜索引擎" prop="search_engine" /> -->
            <!-- <el-table-column label="网站权重" prop="site_weight" /> -->
            <!-- <el-table-column label="" prop="top100" /> -->
            <el-table-column label="查询时间" prop="create_time">
              <template slot-scope="scope">
                {{ getDate(scope.row.create_time) }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200px" fixed="right">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  class="orange"
                  size="mini"
                  @click="checkInfo(scope.row)"
                >
                  详情
                </el-button>
                <el-button
                  type="primary"
                  size="mini"
                  @click="checkNew(scope.row)"
                  v-loading.fullscreen.lock="fullscreenLoading"
                >
                  数据更新
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page="queryPage.currentPage"
            :page-sizes="queryPage.pageSizes"
            :page-size="queryPage.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="queryPage.total"
            :hide-on-single-page="
              queryPage.total < queryPage.size ? true : false
            "
            @size-change="handleSizeChange2"
            @current-change="handleCurrentChange2"
          />
        </div>
        <BouncedDialog
          title="详情"
          :dialog-show.sync="dialogInfo"
          width="60%"
          class="link"
        >
          <el-table
            :data="resultInfo"
            border
            stripe
            :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }"
          >
            <el-table-column
              label="页面标题"
              prop="page_title"
              show-overflow-tooltip
            />
            <el-table-column
              label="页面链接地址"
              prop="page_url"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <el-link :href="scope.row.page_url" target="_blank">
                  {{ scope.row.page_url }}
                </el-link>
              </template>
            </el-table-column>
            <el-table-column label="排名" prop="top_rank" />
            <el-table-column label="查询时间" prop="create_time">
              <template slot-scope="scope">
                {{ getDate(scope.row.create_time) }}
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page="detailPage.currentPage"
            :page-sizes="detailPage.pageSizes"
            :page-size="detailPage.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="detailPage.total"
            :hide-on-single-page="
              detailPage.total < detailPage.size ? true : false
            "
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1"
          />
        </BouncedDialog>
        <div class="note">
          <p>注意事项</p>
          <ul>
            <li>
              排名数据每日按计划定时进行更新，同时也可以通过数据更新按钮进行排名即时查验;
            </li>
            <!-- <li>关键词排名列表上，0标识排名没有进入到前100位。</li> -->
          </ul>
        </div>
      </el-tab-pane>
      <el-tab-pane label="关键词管理" name="1">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-plus"
          style="margin: 0 15px 15px"
          @click="goAdd"
        >
          添加站点关键词
        </el-button>
        <a :href="downurl" download="">
          <el-button
            size="small"
            type="primary"
            class="orange el-icon-download"
          >
            下载关键词模板
          </el-button>
        </a>
        <el-upload
          :headers="myHeaders"
          :data="uploadData"
          class="avatar-uploader"
          :action="$store.getters.updateURL + 'keyword/import'"
          :show-file-list="true"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :on-change="handleChangePic"
        >
          <el-button
            size="small"
            type="primary"
            style="background-color: #6f6f95"
            icon="el-icon-upload2"
          >
            导入关键词
          </el-button>
        </el-upload>
        <BouncedDialog
          :title="addForm.id ? '编辑' : '添加'"
          :dialog-show.sync="dialogShow"
          width="50%"
          class="keyword"
        >
          <el-form
            ref="addForm"
            :model="addForm"
            :rules="rules"
            inline
            class="addForm"
            label-width="80px"
          >
            <el-form-item label="选择站点" prop="website_id">
              <el-select
                v-model="addForm.website_id"
                placeholder="请选择站点"
                disabled
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.domain"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="关键词" prop="name">
              <el-input v-model="addForm.name" />
            </el-form-item>
            <el-form-item label="链接" prop="url">
              <el-input v-model="addForm.url" />
            </el-form-item>
            <el-form-item label="位置">
              <el-input v-model="addForm.position" />
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="addForm.status">
                <el-option label="正常" :value="1" />
                <el-option label="暂停" :value="2" />
              </el-select>
            </el-form-item>
            <div class="btn">
              <el-button @click="dialogShow = false">取 消</el-button>
              <el-button type="primary" @click="submit()">确 定</el-button>
            </div>
          </el-form>
        </BouncedDialog>
        <!-- <el-button type="danger" size="small" icon="el-icon-delete" @click="Batchdelete">批量删除</el-button> -->
        <el-table
          :data="keywordData"
          border
          stripe
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          @selection-change="handleSelectionChange"
        >
          <!-- <el-table-column type="selection" width="55" /> -->
          <el-table-column label="ID" prop="id" width="75" />
          <el-table-column label="关键词" prop="name" show-overflow-tooltip />
          <el-table-column label="链接" prop="url" show-overflow-tooltip />
          <el-table-column label="分布位置" prop="position" />
          <el-table-column label="百度PC" prop="baidu_pc" />
          <el-table-column label="百度MOB" prop="baidu_mob" />
          <el-table-column label="360PC" prop="three_pc" />
          <el-table-column label="搜狗MOB" prop="sougou_mob" />
          <el-table-column label="状态" prop="status">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status == 1" type="danger" size="small">
                正常
              </el-tag>
              <el-tag v-else type="info" size="small">已暂停</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="220px" fixed="right">
            <template slot-scope="scope">
              <el-button
                type="primary"
                class="orange"
                size="mini"
                @click="check(scope.row)"
              >
                查看
              </el-button>
              <el-button type="primary" size="mini" @click="goedit(scope.row)">
                编辑
              </el-button>
              <el-button class="dele" size="mini" @click="del(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <BouncedDialog
          title="关键词趋势图"
          :dialog-show.sync="dialogShow2"
          width="50%"
          class="keyword"
        >
          <div>
            <Echarts ref="echarts" :keyword-data="keywordsData" />
          </div>
        </BouncedDialog>
        <el-pagination
          :current-page="page.currentPage"
          :page-sizes="page.pageSizes"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          :hide-on-single-page="page.total < page.size ? true : false"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import keywordApi from '@/api/market/keywords.js'
import websiteApi from '@/api/website.js'
import Echarts from './echarts.vue'
import { getToken } from '@/utils/auth'
var token = 'Bearer ' + getToken()
export default {
  components: { Echarts },
  data() {
    return {
      fullscreenLoading: false,
      detailKeywordId: 0,
      keywords: '',
      engine: 'baidu_pc',
      rank: '',
      downurl: '',
      keywordData: [], // 关键词列表
      dialogShow: false,
      options: [], // 站点下拉选项
      addForm: {},
      dialogShow2: false,
      addForm2: {}, // 编辑
      keywordIds: [], // 关键词id数组
      rules: {
        website_id: [
          { required: 'true', message: '请选择站点', trigger: 'change' }
        ],
        name: [
          { required: 'true', message: '请输入关键词名称', trigger: 'blur' }
        ],
        url: [
          { required: 'true', message: '请输入关键词链接', trigger: 'blur' }
        ]
      },
      rules2: {
        keyword_id: [
          { required: 'true', message: '请选择关键词', trigger: 'change' }
        ],
        website_id: [
          { required: 'true', message: '请选择站点', trigger: 'change' }
        ]
      },
      page: {
        total: 0,
        currentPage: 1,
        size: 10,
        pageSizes: [10, 20, 30, 40]
      }, // 分页器
      detailPage: {
        total: 0,
        currentPage: 1,
        size: 10,
        pageSizes: [10, 20, 30, 40]
      }, // 分页器
      queryPage: {
        total: 0,
        currentPage: 1,
        size: 10,
        pageSizes: [10, 20, 30, 40]
      }, // 分页器
      val: {},
      id: '',
      siteId: '',
      activeName: '2',
      myHeaders: { Authorization: token },
      uploadData: {},
      resultData: [],
      dialogInfo: false,
      resultInfo: [],
      queryData: {},
      keywordsData: []
    }
  },
  computed: {
    siteId1() {
      return this.$store.getters.siteId
    }
  },
  watch: {
    siteId1(val, value) {
      this.siteId = val
      this.uploadData = {
        website_id: val
      }

      this.getList()
      this.getQuery()
    }
  },
  created() {
    this.getWebsiteList()
    this.siteId = this.$store.getters.siteId
    this.uploadData = {
      website_id: this.$store.getters.siteId
    }

    this.getList()
    this.getDownload()
    if (this.siteId) {
      this.getQuery()
    }
  },
  mounted() {
    // this.getTikets()
  },
  updated() {},
  methods: {
    getDate(date) {
      var t = new Date(date).toLocaleString()
      return t
    },
    // 查看详情
    checkInfo(row) {
      this.dialogInfo = true
      this.detailKeywordId = row.keyword_id
      this.getDetail()
    },
    getDetail() {
      const param = {
        page: this.detailPage.currentPage,
        limit: this.detailPage.size,
        keyword_id: this.detailKeywordId,
        engine: this.engine
      }
      keywordApi.keywordDeatil(param).then(res => {
        if (res.code == 0) {
          this.detailPage.total = res.count
          this.resultInfo = res.data
        }
      })
    },
    // 查询最新
    checkNew(row) {
      this.fullscreenLoading = true
      const param = {
        id: row.keyword_id,
        search_engine: this.engine
      }
      keywordApi.updateRank(param).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
          this.getQuery()
        }
        this.fullscreenLoading = false
      })
    },
    changeEngine(val) {
      this.rank = ''
      this.engine = val
      this.getQuery()
    },
    changeRank(val) {
      this.rank = val
      this.getQuery()
    },
    rest() {
      this.rank = ''
      this.getQuery()
    },
    // 查询
    search() {
      this.getQuery()
    },
    // 关键词监控
    getQuery() {
      const val = {
        // website_id: this.siteId,
        website_id: 3,
        engine: this.engine,
        rank: this.rank,
        limit: this.queryPage.size,
        page: this.queryPage.currentPage,
        keyword: this.keywords
      }
      keywordApi.keywordQuery(val).then(res => {
        if (res.code == 0) {
          this.queryData = res.data.count
          this.resultData = res.data.pageData.data
        }
      })
    },
    // 下载关键词模板
    getDownload() {
      keywordApi.keywordDownload().then(res => {
        if (res.code == 0) {
          this.downurl = res.data
        }
      })
    },
    // 上传切换
    handleChangePic(file, fileList) {
      if (fileList.length > 1) {
        fileList.splice(0, 1)
      }
    },
    beforeAvatarUpload(file) {},

    handleAvatarSuccess(res, file) {
      if (res.code == 0) {
        this.$message.success(res.msg)
        this.getList()
      } else {
        this.$message.error(res.msg)
      }

      // const isxls = file.type ===
    },
    // 查看
    check(row) {
      // 模拟随机数
      this.keywordsData = row
      // for (var i = 0; i < 7; i++) {
      //   const a = parseInt(Math.random() * (300 + 1), 10)
      //   this.keywordsData.push(a)
      // }
      this.dialogShow2 = true
    },
    // 切换tab
    handleClick(val) {
      this.activeName = val.name
      if (val.name == '1') {
        this.getList()
      } else {
        this.getQuery()
      }
    },
    // 全选
    handleSelectionChange(val) {},
    // 批量删除
    Batchdelete() {},
    // handlechange() {},
    // 获取站点列表
    getWebsiteList() {
      websiteApi.websiteList().then(res => {
        this.options = res.data

        // this.siteId = res.data[0].id
        // this.getList()
      })
    },
    // 新增
    goAdd() {
      // this.$router.push({ name: 'addKeyWords' })
      this.addForm = {
        id: '',
        name: '',
        url: '',
        status: 1,
        position: '',
        website_id: this.$store.getters.siteId
      }

      this.dialogShow = true
    },
    // 编辑
    goedit(row) {
      // this.$router.push({ name: 'addKeyWords', siteId: this.siteId, id: row.id })
      // this.addForm2.website_id = this.siteId
      // this.addForm2.keyword_id = this.keywordIds
      // this.$set(this.addForm2, 'keyword_id', this.keywordIds)

      this.addForm = {
        id: row.id,
        name: row.name,
        status: row.status,
        position: row.position,
        website_id: row.website_id,
        url: row.url
      }
      this.dialogShow = true
    },
    submitEdit() {
      this.$refs.addForm2.validate(valid => {
        if (valid) {
          keywordApi.keywordUpdate({ ...this.addForm2 }).then(res => {
            if (res.code == 0) {
              this.$message.success(res.msg)
              this.dialogShow2 = false
              this.getList()
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
    submit() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          if (!this.addForm.id) {
            keywordApi.keywordSave({ ...this.addForm }).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow = false
                this.getList()
              } else {
                this.$message.error(res.msg)
              }
            })
          } else {
            keywordApi.keywordUpdate({ ...this.addForm }).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow = false
                this.getList()
              } else {
                this.$message.error(res.msg)
              }
            })
          }
        } else {
          this.$message.error('请填写必要信息')
        }
      })
    },

    // 删除
    del(row) {
      const arr = []
      const val = {
        keyword_id: [],
        website_id: row.website_id
      }
      val.keyword_id.push(row.id)
      this.$confirm('此操作将永久删除该关键词, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          keywordApi.keywordDelete(val).then(res => {
            if (res.code == 0) {
              this.$message.success(res.msg)
              this.getList()
            } else {
              this.$message.error(res.msg)
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    // 列表
    getList() {
      this.val.page = this.page.currentPage
      this.val.limit = this.page.size
      this.val.website_id = this.siteId
      // this.val.website_id = 3

      keywordApi.keywordList(this.val).then(res => {
        this.keywordData = res.data
        this.page.total = res.count
        // this.keywordIds = []
        // res.data.forEach(el => {
        //   this.keywordIds.push(el.keyword_id)
        // })

        // this.page.total = res.count
      })
    },
    // 分页规格改变
    handleSizeChange(val) {
      this.page.size = val
      this.page.currentPage = 1
      this.getList()
    },
    // 分页点击
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getList()
    },
    // 分页规格改变
    handleSizeChange1(val) {
      this.detailPage.size = val
      this.detailPage.currentPage = 1
      this.getDetail()
    },
    // 分页点击
    handleCurrentChange1(val) {
      this.detailPage.currentPage = val
      this.getDetail()
    },
    // 分页规格改变
    handleSizeChange2(val) {
      this.queryPage.size = val
      this.queryPage.currentPage = 1
      this.getQuery()
    },
    // 分页点击
    handleCurrentChange2(val) {
      this.queryPage.currentPage = val
      this.getQuery()
    }
  }
}
</script>
<style lang="scss">
#order {
  .el-radio-group {
    .el-radio-button {
      margin-right: 13px;
    }
    .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      background-color: #fa8828;
      border-color: #fa8828;
      color: #fff;
    }
    .el-radio-button__inner {
      border-radius: 30px;
      border-left: solid 1px #dcdfe6;
      color: #555;
      font-size: 14px;
      padding: 0;
      width: 80px;
      height: 30px;
      line-height: 28px;
      text-align: center;
      box-shadow: none;
    }
    .el-radio-button--medium .el-radio-button__inner {
      width: 90px;
      height: 36px;
      line-height: 36px;
    }
  }

  .keyword {
    .el-select {
      width: 100%;
    }
  }
  .addForm .el-form-item {
    width: 100%;
  }
  .addForm .el-form-item__content {
    width: calc(100% - 80px);
  }
  .bar-right {
    .el-button {
      width: 92px;
    }
    .el-input {
      .el-input__inner {
        border-radius: 60px;
      }
    }
  }
}
#tabcard {
  .el-upload-list {
    display: inline-block;
    vertical-align: top;
    margin-top: -5px;
  }
}
</style>
<style scoped lang="scss">
.el-tab-pane {
  padding-bottom: 20px;
}
.avatar-uploader {
  display: inline-block;
  margin-left: 15px;
}
.el-table {
  margin-bottom: 20px;
}
.topbar {
  // background-color: #f84311;
  margin-top: 20px;
  padding: 20px;
  height: 60px;
  display: flex;
  justify-content: space-between;
  color: #333;
  font-size: 15px;
  .bar-left {
    .btn {
      display: inline-block;
      width: 80px;
      height: 30px;
      line-height: 30px;
      border-radius: 30px;
      text-align: center;
      margin-right: 13px;
      font-size: 14px;
      cursor: pointer;
      border: solid 1px #dcdfe6;
      color: #555;
    }
    .btn.restBtn {
      border: none;
      background-color: #fc561c;
      color: #fff;
    }
  }
  .bar-right {
    position: relative;
    .el-button {
      position: absolute;
      right: 0;
    }
    .el-input {
      width: 280px;
      .el-input__inner {
        border-radius: 60px;
      }
    }
  }
}
.monitor {
  padding: 0 20px;
  .box {
    padding: 0 20px;
    height: 120px;
    background-color: #fc561c;
    display: flex;
    justify-content: left;
    align-items: center;
    color: #fff;
    border-radius: 5px;
    .icon {
      font-size: 55px;
      margin-right: 20px;
    }
    .text {
      line-height: 25px;
      font-size: 15px;
    }
  }
  .box.second {
    background-color: #6f6f95;
  }
  .box.third {
    background-color: #f9b633;
  }
  .box.fourth {
    background-color: #fa8828;
  }
}
.note {
  font-size: 14px;

  p {
    line-height: 50px;
    border-bottom: solid 1px #eee;
    text-indent: 1.3em;
  }
  ul {
    margin: 20px 0 20px;
    padding-left: 35px;
    li {
      line-height: 30px;
      color: #666;
    }
  }
}
.content {
  margin-top: 20px;
}
.searchBtn {
  margin-bottom: 15px;
  margin-left: 20px;
}
</style>
